<template>
	<view class="login">
		<view class="content-wrapper">
			<view class="title">
				<image class="itemMore" src="/static/image/icon_launcher.png"></image>
			</view>
			<view class="title_text">
				<text>皖运安达</text>
			</view>
			<view class="login-form">
				<view class="login-form-items">
					<image class="login_icon" src="/static/image/icon_login_user.png"></image>
					<input type="text" class="login-input" v-model="username" placeholder="请输入用户名" />
				</view>
                <view class="login-form-items" v-if="icon == 1">
                	<image class="login_icon" src="/static/image/icon_login_pwd.png"></image>
                	<input type="text"  class="login-input" v-model="password"
                		placeholder="请输入密码" />
                		<u-icon  size="22" name="eye-off" @click="iconxy(2)"></u-icon>
                </view>
				<view class="login-form-items" v-if="icon == 2">
					<image class="login_icon" src="/static/image/icon_login_pwd.png"></image>
					<input type="password" password="false" class="login-input" v-model="password"
						placeholder="请输入密码" />
						<u-icon  size="22" name="eye-off" @click="iconxy(1)"></u-icon>
				</view>
				<view style="display: flex;">
					<view class="login-form-items">
						<image class="login_icon1" src="/static/image/imgCode.png"></image>
						<input type="text" class="login-input" v-model="code" placeholder="请输入验证码" />
					</view>
					<view class="captcha-wrapper" style="margin: auto 0;" @click="refresh()">
						<image class="img_code" :src="imgByte"></image>
					</view>
				</view>

				<checkbox class="checkbox" value="cb1" :checked="isPwd" @click="boxClick()" color="#FFCC33"
					style="transform:scale(0.7)" />
				记住密码
			</view>
		</view>
		<view class="submit-wrapper">
			<view class="login-btn" @click="btnLogin()">登 录</view>
			<view class="login-btn entrance" @click="entranceClick()">装卸货企业注册</view>
		</view>
		<view style="position: absolute;bottom: 20rpx;margin-left: 20rpx;">
			<checkbox class="checkbox" :checked="isXy" color="#FFCC33" style="transform:scale(0.7)"
				@click="checkBoxClick()" />
			登录表示已阅读并同意
			<text class="txt" @click="click_yh()">
				《用户协议》
			</text>
			<text class="txt" @click="click_ys()">
				《隐私协议》
			</text>
		</view>
		<modalConfirm :visible="confirmData.visible" :data="confirmData" @confirm="confirm" @cancel="cancel" />
			<modalConfirms :visible="xgmmshow"  @confirm="confirmok"  />
	</view>
</template>

<script>
	import {base64ToParamter,Base64} from '@/common/base64Util.js';
	var b = new Base64();
	// import md5 from '@/common/md5.js';
	import store from "@/store/index";
	import modalConfirm from "@/components/tool-modal/modal-confirm";
	import modalConfirms from "@/components/tool-modal/modal-confirm-s";
	import sm3 from "@/common/sm3/index.js";
	// import {updatepassword} from "@/common/api/search.js";
	export default {
		components: {
			modalConfirm,
			modalConfirms
		},
		data() {
			return {
				icon:2,
				pwd_map: {
					username: "",
					password: "",
					isPwd: false,
				},
				xgmmshow:false,
				isPwd: false,
				isXy: false,
				username: "",
				password: "",
				code: "",
				key: "",
				imgByte: "data:image/png;base64,",
				confirmData: {
					visible: false,
					title: '请更新最新版本',
					content: '',
					showCancel: true,
					cancelText: '暂不更新',
					confirmText: '去下载',
				}
			};
		},
		mounted() {
			let platform = uni.getSystemInfoSync().platform == 'android' ? 1 : 2;
			let AppVersion = this.$store.getters.AppVersion;
			this.$api.getNewByApp(platform, AppVersion, 1)
				.then((res) => {
					const resData = res.data.data;
					if (resData.updUrl) {
						this.confirmData.updUrl = resData.updUrl;
						this.confirmData.content = resData.vDesc;
						this.confirmData.showCancel = resData.updType === 2; // 是否可以跳过更新
						this.confirmData.visible = true;
					} else {
						if (this.$store.getters.getToken) {
							// 如果本地有用户信息，则跳转到首页
							this.$goBack('../index/index', 4);
							return false;
						}
						//获取本地密码
						this.getPwd()
						this.getImgCode()
					}
				}).catch(() => {
					//获取本地密码
					this.getPwd()
					this.getImgCode()
				})
		},
		methods: {
			// 密码显隐
			iconxy(i){
				// console.log(i,888)
				this.icon = i
			},
			cancel() {
				this.confirmData.visible = false;
				if (this.$store.state.userId) {
					// 如果本地有用户信息，则跳转到首页
					this.$goBack('../index/index', 4);
					return false;
				}
				//获取本地密码
				this.getPwd()
				this.getImgCode()
			},
			confirm() {
				plus.runtime.openURL(this.confirmData.updUrl);
			},
			confirmok(val){
				console.log(val,77777)
				let data ={
					oldPassword:sm3(val.password),
					newPassword:sm3(val.password1),
					newPassword1:sm3(val.password2)
				}
				this.$api.updatepassword(data).then(res => {
					console.log(res,888)
					if(res.data.code == 200){
						this.xgmmshow = false
						this.password = ''
						this.$store.commit('logOut');
						this.$goBack('../login/login', 4)
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.refresh()
					}
					// this.loading = false;
					// const resData = res.data.data;
					// this.list.push(...resData.records);
					// this.pages.total = resData.total;
				})
			},
			//记住密码
			boxClick() {
				this.isPwd = !this.isPwd
			},
			// 注册页面
			entranceClick() {
				this.$goBack('../index/entry', 2);
			},
			//获取记住密码信息
			getPwd() {
				uni.getStorage({
					key: 'password',
					success: (res) => {
						if (res.data) {
							this.username = res.data.username
							this.password = res.data.password
							// console.log(this.username, this.password)
							this.isPwd = res.data.isPwd
						} else {
							this.username = ""
							this.password = ""
							this.isPwd = false
						}
					}
				})
			},
			//存储密码信息
			setPwd() {
				//如果点了记住密码进行存储  如果没点清空存储
				if (this.isPwd) {
					this.pwd_map.username = this.username;
					this.pwd_map.password = this.password;
					this.pwd_map.isPwd = this.isPwd;
					uni.setStorage({
						key: 'password',
						data: this.pwd_map,
					})
				} else {
					uni.setStorage({
						key: 'password',
						data: {},
					})
				}
			},
			checkBoxClick() {
				this.isXy = !this.isXy
			},
			//刷新验证码
			refresh() {
				this.getImgCode()
			},
			//用户协议
			click_yh() {
				uni.navigateTo({
					url: 'user_agreement'
				})
			},
			//隐私协议
			click_ys() {
				uni.navigateTo({
					url: 'privacy_agreement'
				})
			},
			btnLogin() {
				if (this.isXy) {
					let body_param = {
						tenantId: '000000',
						username: this.username,
						password: sm3(this.password),
						grant_type: 'captcha',
						scope: 'all',
						type: 'account'
					}
					let header = {
						'Captcha-Key': this.key,
						'Captcha-Code': this.code
					}
					const userInfo = {};
					this.$api.login(body_param, header)
						.then(res => {
							// console.log(res.data, '用户')
							if (![2, 3, 6, 7].includes(res.data.userRoleType)) {
								uni.showToast({
									title: "该账号不是企业平台账号，无法登陆企业平台",
									icon: 'none'
								})
								return;
							}
							store.commit('set_token', res.data.access_token)
							store.commit('tokenType', res.data.token_type)
							store.commit('refreshToken', res.data.refresh_token)
							store.commit('userId', res.data.user_id)
							store.commit('realName', res.data.real_name)
							store.commit('userType', res.data.userRoleType)
							store.commit('empIdCard', res.data.empIdCard)
							store.commit('empInfoId', res.data.empInfoId)
							store.commit('phone', res.data.phone)
							store.commit('set_userInfo', res.data);
							Object.assign(userInfo, res.data);
							if(res.data.passwdExp == true){
								this.xgmmshow = true
								return
							}
							this.setPwd();
							if (!res.data.empIdCard) {
								// 如果没有身份证号码，直接进入首页
								this.$goBack('../index/index?isLogin=1', 4)
								return;
							}
							// 是否申请过安全码
							return this.$api.staffIsApply({
								archiveCode: res.data.empIdCard
							});
						})
						.then(res => {
							const resData = res.data.data;
							// 人员类型：1、管理人员；2、驾驶员；3、押运员；4、驾压人员
							userInfo.empInfoType = resData.type;
							// 是否申请安全码
							userInfo.isApplied = resData.isApplied;
							// 资格证类型
							userInfo.archiveType = resData.archiveType;
							// console.log(userInfo);
							this.$store.commit('set_userInfo', userInfo);
							this.$goBack('../index/index?isLogin=1', 4)
						})
						.catch(() => {});
				} else {
					uni.showToast({
						title: "请阅读并同意下方协议",
						icon: 'none'
					})
				}
			},
			getImgCode() {
				this.$api.getCode().then(res => {
					console.log('res结果===》',res)
					this.key = res.data.key;
					var image = res.data.image;
					var img = image.split(',')[1];
					this.imgByte = "data:image/png;base64," + img;
				}).catch(res => {
					console.log('res结果===',res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.txt {
		color: $uni-color-primary;
	}

	.img_code {
		margin-top: 15rpx;
		margin-left: 50rpx;
		width: 150rpx;
		height: 80rpx;
	}

	.checkbox {
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	page {
		background: #FFFFFF;
	}

	//    .login-btn{
	// 	font-size: 35rpx;
	// 	font-weight: 700;
	// 	border-radius: 50rpx;
	// 	margin-top: 80rpx;
	// 	margin-left: 50rpx;
	// 	margin-right: 50rpx;
	// 	border: 0px solid #FFFFFF;
	// }

	.login-btn {
		font-size: 35rpx;
		font-weight: 700;
		border-radius: 50rpx;
		background-color: $app-color;
		color:#fff;
		margin: 0rpx auto;
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.entrance{
		margin-top: 15px;
	}

	.login_icon1 {
		width: 45rpx;
		height: 35rpx;
		margin: auto 15rpx;
	}

	.login_icon {
		width: 35rpx;
		height: 35rpx;
		margin: auto 15rpx;
	}

	.login {
		height: 100vh;

		.content-wrapper {
			width: 100%;

			.title {
				padding-top: 180rpx;
				width: 100%;
				height: 150rpx;
				text-align: center;
				margin-bottom: 5px;
				flex-direction: column;

				.itemMore {
					width: 150rpx;
					height: 150rpx;
				}

			}

			.title_text {
				width: 100%;
				text-align: center;
				margin-bottom: 100rpx;

				text {
					font-size: 16px;
					font-weight: 700;
				}
			}

			.login-form {
				padding: 20rpx 45rpx;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 0px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;

					.login-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%;
					}

					img {
						width: auto;
						height: auto;
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 120rpx;
			text-align: center;
		}

	}
</style>
